<template>
    <view-content @longpress="showMenu" @click="getDetail">
        <div class="title">
            <slot name="title"></slot>
        </div>
        <div class="movieItem"  >
            <div class="left">
                <img @click.stop="showImage" v-lazy="mitem.img" alt="">
            </div>
            <div class="center">
                <div class="m_title">{{mitem.nm}}</div>
                <div class="m_score" v-if="mitem.globalReleased==true">评分： <span> {{mitem.sc}}</span></div>
                <div class="m_score" v-if="mitem.globalReleased==false"><span>{{mitem.wish}}</span>人想看</div>            
                <div class="">主演: {{mitem.star}}</div>
                <div class="">{{mitem.showInfo}}</div>
            </div>
            <div class="right">
                <button class="btnBuy" v-if="mitem.globalReleased==true">购票</button>
                <button @click="preTicket" class="btnPre" v-if="mitem.globalReleased==false">预售</button>
            </div>
        </div>
    </view-content>
    
</template>

<script>
    import {mapActions} from "vuex";
    import {formatData} from "../utils/dataUtils.js";
    export default {
        name:"movieItem",
        props:["mitem"],
        methods:{
			...mapActions(["showPreviewImage"]),
            preTicket(){
               this.$toast("现在还不能买票");
            },
            showMenu(event){
                this.showActionSheet({
                    itemList:["查看详细","添加收藏","收藏记录"],
                    success:res=>{
                        if(res==0){
                            this.getDetail();
                        }
                        else if(res==1){
                            //添加到收藏里面去  收藏记录应该是一个数组
                            let saveCollection=localStorage.getItem("saveCollection")||[];
                            if(!Array.isArray(saveCollection)){
                                //把JSON字符串转对象
                                saveCollection=JSON.parse(saveCollection);
                            }
                            //当前的收藏记录是否已经存在了
                            let index = saveCollection.findIndex(item=>{
                                return item.id==this.mitem.id;
                            });
                            if(index!=-1){
                                this.$toast("你已经收藏过了");
                                this.$router.push({
                                     name:"saveCollection"
                                });
                                return ;
                            }


                            //这是一便捷的深拷贝
                            let obj={...this.mitem,s_time:formatData(new Date())};
                            saveCollection.push(obj);
                            //重新放到缓存里面去  要把它序列化成JSON字符串
                            localStorage.setItem("saveCollection",JSON.stringify(saveCollection));
                            this.$router.push({
                                name:"saveCollection"
                            })
                        }
                        else if(res==2){
                            this.$router.push({
                                name:"saveCollection"
                            })
                        }
                    }
                })
            },
            getDetail(){
                this.$router.push({
                    name:"detail",
                    query:{
                        id:this.mitem.id
                    }
                })
            },
			//显示预览图片
			showImage(){
				this.$emit("showImage",this.mitem.p_img);
			}
        }
    }
</script>

<style lang="scss" scoped>
@import '../assets/css/comm.scss';
.title{
    color:#333;
    font-size:.28rem;
    margin-left:.1rem;
    margin-top: .1rem;
    margin-bottom: .1rem;

}
.movieItem{
    border-bottom: 1px solid lightgray;
    @include flexbox();
    box-sizing: border-box;
    padding: .1rem;
    >.left{
        width: 1.28rem;
        img{
            width:100%;
            display: block;   /*解决图片下在多余的部分*/
        }
    }
    .center{
        flex: 1;
        color: gray;
        font-size: .24rem;
        margin-left: .1rem;
        margin-right: .1rem;
        >*{
            font-size: inherit;
        }
        .m_title{
            font-size: 18px;
            font-weight: bold;
            color: #000000;
        }
        .m_score{
            span{
                color: orange;
                font-size: inherit;
            }
        }
    }
    .right{
        width:1.8rem;
        @include flexbox();
        justify-content: center;
        align-items: center;
        .btnBuy{
            width:1.2rem;
            height: .6rem;
            background-color: $primaryColor;
            border: none;
            color: #ffffff;
            border-radius: .1rem;
            font-size: .24rem;
        }
        .btnPre{
            @extend .btnBuy;
            background-color: #3c9fe6;   
        }
    }

}
</style>